<template>
	<view>
		<!-- 头部icon -->
		<view class="topIcon">
			<image src="../../static/image/search.png" mode="widthFix"></image>
			<navigator url="../mine/cart/cart">
				<image src="../../static/image/cart.png" mode="widthFix"></image>
			</navigator>
		</view>
		<!-- 轮播 -->
		<swiper class="swiper" indicator-dots autoplay circular>
			<swiper-item class="swiper_item" v-for="(item, index) in list">
				<view class="swiper_image_c">
					<image class="swiper_image" :src="item.pic" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 分类 -->
		<view class="contain">

			<view class="kind_c">
				<navigator :url="kindUrl(item)" class="kind_item" v-for="(item, index) in kindList" :key="index">
					<view class="kind_image_c">
						<image class="kind_image" :src="item.icon" mode="aspectFill"></image>
					</view>
					<text class="kind_name">{{item.name}}</text>
				</navigator>
			</view>
		</view>

		<!-- 限时活动 -->
		<view class="contain">

			<view class="limitActi">
				<view class="limitActi_c">
					<view class="title">
						<image class="limitActi_title_img" src="../../static/image/laba.png" mode="widthFix"></image>
						<text class="limitActi_title_text">限时活动</text>
					</view>
				</view>
				<swiper class="acti_swiper" vertical autoplay circular :interval="2000">
					<swiper-item class="acti_swiper_item" v-for="(item, index) in limitActi" :key="index">
						<text class="acti_bandName">{{item.brandName}}</text>
						<view class="acti_price_c">
							<text class="acti_price">{{item.price}}</text>
							<text class="acti_promotion_price">现价：{{item.promotionPrice}}元</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="contain">
			<view class="hot_recommend">
				<text class="text_title">
					热门推荐
				</text>
				<swiper class="hot_recommend_c" display-multiple-items='3' circular autoplay interval="2000" duration="600">
					<swiper-item class="hot_recommend_item" v-for="(item, index) in hotRecomendList" :key="index" @tap="togoodDetail(item)">
							<image class="hot_recommend_image" :src="item.pic" mode="aspectFill"></image>
							<text class="hot_recommend_des">{{item.description ? item.description : ''}}</text>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 新品推荐 -->
		<view class="contain">
			<view class="new_recommend">
				<view @tap="togoodDetail(item)" class="new_recommend_item" v-for="(item, index) in newRecommendList" :key='index'>
					<image class="new_recommend_image" :src="item.pic" mode="aspectFill"></image>
					<view class="new_recommend_text_c">
						<text class="name">{{item.name}}</text>
						<text class="price">{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<TwoColGoodList :twoColGoodList="twoColGoodList"></TwoColGoodList>
	</view>
</template>

<script>
	import request from '../../api/request.js';
	import TwoColGoodList from '../../components/TwoColGoodList.vue'
	export default {
		data() {
			return {
				// 轮播数据
				list: [],
				// 分类列表数据
				kindList: [],
				// 限时活动
				limitActi: [],
				// 热门推荐
				hotRecomendList: [],
				// 新品推荐
				newRecommendList: [],
				// 底部两栏数据展示
				twoColGoodList: []

			};
		},
		methods: {
			initInfo() {
				this.requestSwiperImage();
				this.requestHomeKind();
				this.requestLimitActi();
				this.requestHotRecommend();
				this.requestNewRecommend()
			},
			// 请求轮播图片
			async requestSwiperImage() {
				const res = await request({
					url: "/home/bannerAds"
				})
				this.list = res.data.data.items;
			},
			// 请求分类
			async requestHomeKind() {
				const res = await request({
					url: "/home/categorys/1308336521604599809"
				})
				this.kindList = res.data.data.category.children;
			},

			// 限时活动
			async requestLimitActi() {
				const res = await request({
					url: "/home/recommendList",
				})
				this.limitActi = res.data.data.items;
			},
			// 热门推荐
			async requestHotRecommend() {
				const res = await request({
					url: "/home/hotList"
				})
				this.hotRecomendList = res.data.data.items;
			},
			// 新品推荐
			async requestNewRecommend() {
				const res = await request({
					url: "/home/lejuLatestProducts"
				})
				this.newRecommendList = res.data.data.productList;
				this.twoColGoodList = res.data.data.productList;
			},
			// 轮播跳转至详情页
			togoodDetail(item) {
				uni.navigateTo({
					url: `/pages/goodsDetail/goodsDetail?id=${item.id}`
				})
			}

		},
		// 初始数据
		onLoad() {
			this.initInfo()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initInfo()
		},
		components: {
			TwoColGoodList
		},
		computed: {
			kindUrl() {
				return function(item) {
					return '/pages/kind/kindPage/kindPage?categoryId=' + item.id
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './home.scss';
</style>
